<template>
  <div class="hello">
    <el-row>
      <el-col :span="12">
        <div style="width: 800px; height: 400px" id="main"></div>
      </el-col>
      <el-col :span="12">
        <div style="width: 800px; height: 400px" id="pie"></div>
      </el-col>
    </el-row>
    <el-table :data="allList" stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="keyword" label="关键词" width="180">
      </el-table-column>
      <el-table-column prop="hotIndex" label="热度/万" width="180">
      </el-table-column>
      <el-table-column prop="created" label="时间" width="180">
      </el-table-column>
      <el-table-column prop="answerCount" label="回答数量" width="180">
      </el-table-column>
      <el-table-column prop="commentCount" label="评论数量" width="180">
      </el-table-column>
      <el-table-column label="详情" width="180">
        <template slot-scope="scope">
          <el-button size="small" @click="showContent(scope.row)"
            >查看内容</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="内容"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <span>{{currentMessage}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      allList: [],
      dialogVisible: false,
      currentMessage: ""
    };
  },
  methods: {
    // 查看内容
    showContent(row) {
      this.dialogVisible = true;
      this.currentMessage = row.excerpt;
    },
    // 发送请求，从后台获取数据
    sendRequest() {
      this.$http("/hot-info/first?count=10").then((response) => {
        this.allList = response.data;
        var x = [];
        var y = [];
        var pieData = [];
        for (var i = 0; i < this.allList.length; i++) {
          x.push(this.allList[i].keyword);
          if (i == 0 || i == 1) {
            y.push({
              value: this.allList[i].hotIndex,
              itemStyle: {
                color: "#a90000",
              },
            });
          } else {
            y.push(this.allList[i].hotIndex);
          }
          pieData.push({
            name: this.allList[i].keyword,
            value: this.allList[i].hotIndex,
          });
        }
        var option = {
          title: {
            text: "知乎前10热点柱状图",
          },
          tooltip: {},
          xAxis: {
            data: x,
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: y,
            },
          ],
        };
        let myChart = echarts.init(document.getElementById("main"));
        myChart.setOption(option);

        var pieOption = (option = {
          title: {
            text: "知乎前10热点饼图",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "right",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: pieData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
        let pieChart = echarts.init(document.getElementById("pie"));
        pieChart.setOption(pieOption);
      });
    },
  },
  mounted() {
    this.sendRequest();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
